<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <!-- <view class="flex-row justify-center items-center relative">
        <image class="image pos" src="../../static/wx/de9a58ed15b96e4c9f74671871351afb.png" />
        <text class="text">客户服务</text>
      </view> -->
      <view class="flex-row justify-center items-baseline time">
        <text class="font">2025年03月25日</text>
        <text class="font ml-5">21:20</text>
      </view>

      <!-- 对话框容器 -->
      <view class="chat-list">
      <!-- 发送方消息 -->
      <view v-for="(item, index) in chatList" :key="index" class="chat-item">
        <view class="message-wrap" :class="{ 'align-right': item.isMe }">
          <!-- 头像 -->
          <image class="avatar" v-if="!item.isMe" src="../../static/wx/06c38acc31234e549c58eea36bdc4d3e.png" mode="aspectFit"></image>
          <!-- 消息气泡 -->
          <view class="chat-bubble" :class="{ me: item.isMe }">
            {{ item.message }}
          </view>
          <image class="avatar" v-if="item.isMe" src="../../static/wx/06c38acc31234e549c58eea36bdc4d3e.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    </view>
    <!-- 输入框 -->
    <view class="footer_bj"></view>
    <view class="flex-col justify-start items-center footer">
      <view class="flex-row items-center group_8">
        <input class="uni-input text_3" placeholder="请输入您的问题..." />

        <image
          class="shrink-0 image_6 ml-131"
          src="../../static/wx/3777292908164c5a4d099ad06310432c.png"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      chatList: [
        { message: '您好，请问今天能发货吗？', isMe: true, avatar: '/static/images/avatar-other.png' },
        { message: '您好，很高兴为您服务，啦啦啦，超值优惠，库存逐渐减少中！买到就是赚到！小姐姐不要犹豫啦~\n48小时之内给您安排发货呦~\n喜欢的话抓紧下单吧！嘻嘻', isMe: false, avatar: '/static/images/avatar-me.png' }
      ],
    };
  },

  methods: {},
};
</script>

<style scoped lang="css">

.chat-list {
  flex: 1;
  overflow-y: auto;

}

.chat-item {
  margin-bottom: 30rpx;
}

.chat-bubble {
  padding: 20rpx;
  border-radius: 20rpx;
  max-width: 70%;
  background-color: #FDF7EC;
}

.me {

  align-self: flex-end;
}

.other {

  align-self: flex-start;
}


.message-wrap {
  display: flex;
  align-items: flex-end;
}

.align-right {
  justify-content: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 10px;
}

.chat-bubble {
  padding: 10px;
  border-radius: 10px;
  max-width: 70%;
  word-break: break-word;
}

.me {
  background-color: #E6E9F1;
}



.ml-5 {
  margin-left: 10rpx;
}
.footer_bj {
  height: 180rpx;
}
.ml-131 {
  margin-left: 262rpx;
}
.page {
  padding-top: 0;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding: 0 30rpx;
}
.image {
  width: 48rpx;
  height: 44rpx;
}
.pos {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.text {
  color: #3a7beb;
  font-size: 40rpx;
  font-family: Laila;
  font-weight: 700;
  line-height: 38.08rpx;
}
.time {
  margin: 30rpx 0;
}
.font {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 29.6rpx;
  color: #9c9eb9;
}
.group_3 {
  margin-top: 44rpx;
}

.image_3 {
  width: 78rpx;
  height: 48rpx;
}
.section {
  padding: 40rpx 36rpx;
  background-color: #e6e9f1;
  border-radius: 20rpx;
  width: 526rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 0;
}
.font_2 {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 38rpx;
  color: #2d3142;
}
.image_2 {
  border-radius: 50%;
  width: 54rpx;
  height: 54rpx;
}
.group_5 {
  margin-top: 44rpx;
}
.image_4 {
  width: 638rpx;
  height: 384rpx;
}
.group_6 {
  margin-top: 30rpx;
}
.group_7 {
  width: 268rpx;
}
.text-wrapper {
  padding: 40rpx 0 44rpx;
  background-color: #e6e9f1;
  border-radius: 20rpx;
  width: 228rpx;
}
.text_2 {
  color: #2d3142;
  line-height: 29.66rpx;
}
.pos_3 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.image_5 {
  margin-top: 44rpx;
  width: 638rpx;
  height: 168rpx;
}
.footer {
  width: 100%;
  height: 164rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  padding: 32rpx 0;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  box-shadow: 0rpx -16rpx 60rpx #6c7e9329;
}
.group_8 {
  padding: 28rpx 40rpx;
  border-radius: 24rpx;
  border-left: solid 2rpx #e6e9f1;
  border-right: solid 2rpx #e6e9f1;
  border-top: solid 2rpx #e6e9f1;
  border-bottom: solid 2rpx #e6e9f1;
}
.text_3 {
  line-height: 29.56rpx;
}
.image_6 {
  width: 40rpx;
  height: 40rpx;
}
</style>
